<template>
  <div class="count">
    <!-- /读取vuex中的数据 -->
      <h1>当前求和sum为：{{$store.state.sum}}</h1>
      <!-- 读取vuex中getter对象中的bigsum -->
      <h3>当前求和sum放大10倍后为：{{$store.getters.bigsum}}</h3>
      <h3>我是{{$store.state.name}}同学，我在{{$store.state.school}}学习</h3>
      <hr>
      <!-- 通过计算属性读取 -->
      <h3>当前求和sum放大10倍后为：{{bigsum}}</h3>
      <h3>我是{{name}}同学，我在{{school}}学习</h3>
      
      <!-- 数据共享 读取person组件再用的数据-->
      <h3 style="color:red">person组件中的人数为：{{$store.state.personlist.length}}</h3>

      <select v-model.number="num">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <!-- 如果使用mapAcitons和mapMutations时，需要传入参数num increment(num)-->
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="incrementOdd">当前求和为奇数再+</button>
      <button @click="incrementWait">等3s后再+</button>
  </div>
</template>

<script>
// 引入vuex提供的函数
import {mapState,mapGetters} from 'vuex'
export default {
    name:'Count',
    data() {
        return {
            num:1,
            // sum:0  交给store的state对象管理
        }
    },
    methods: {
        increment(){
            // this.sum += this.num
            // 组件通过this.$store.dispatch(‘函数’，参数)调用想要用到的函数
            // this.$store.dispatch('jia',this.num)
            this.$store.commit('JIA',this.num)  //直接进行数据操作可以直接调用commit跟mutation通信
        },
        decrement(){
            // this.sum -= this.num
            // this.$store.dispatch('jian',this.num)
            this.$store.commit('JIAN',this.num)
        },
         // ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        
        incrementOdd(){
            // if(this.sum % 2)
            //     this.sum += this.num
            // if(this.$store.state.sum % 2)
                // this.$store.dispatch('jia',this.num)
            this.$store.dispatch('jiaodd',this.num)
        },
        incrementWait(){
            // setTimeout(()=>{
            //     this.sum += this.num
            // },300)
            // setTimeout(()=>{
            //     this.$store.dispatch('jia',this.num)
            // },300)
            this.$store.dispatch('jiawait',this.num)
        }
        // ...mapActions({incrementOdd:'jiaodd',incrementWait:'jiawait'}),
    },
    computed:{ 
        /* 通过计算属性读取vuex中的数据 */
        // sum(){
        //     return this.$store.state.sum
        // },
        // name(){
        //     return this.$store.state.name
        // },
        // school(){
        //     return this.$store.state.school
        // },

        /* 当我们在组件想要去获取vuex中的state数据时，比如以上三个数据，可以通过vuex提供的mapState()来获取，import引入mapState
           mapState({key:value}) key是组件的计算属性 ，value是要从vuex的state中获取的数据名
           mapState(['value'])  key和value相同时用数组形式写 
           注意mapState是一个对象，在对象里面再写一个对象需要写成 ...obj{} */
        
        ...mapState({sum:'sum',name:'name',school:'school'}),    //对象形式
        // ...mapState(['sum','name','school']),   //数组形式
        
        /* **************************************** */
        // bigsum(){
        //     return this.$store.getters.bigsum
        // },
        
        /* 同理，想要获取vuex中getters的数据时，需要用到mapGetters(),使用方法同上 */
        ...mapGetters({bigsum:'bigsum'}),
    }
}
</script>

<style>

</style>